第24章网络请求与远程资源

现代浏览器通过 XMLHttpRequest 构造函数生成 XHR 对象：

let xhr = new XMLHttpRequest();

使用 XHR 对象首先要调用 open() 方法，这个方法接收 3 个参数：请求类型、请求 URL，以及请求是否异步的布尔值：

xhr.open("get", "example.php", false);

调用 open() 不会实际发送请求，只是为发送请求做好准备。要发送定义好的请求，需要调用 send() 方法，send() 方法接收一个参数，是作为请求体发送的数据。如果不需要发送请求体，则必须传 null：

xhr.send(null);

收到响应后，XHR 对象的以下属性会被填充数据：

responseText：响应体文本
responseXML："text/xml"或"application/xml"类型响应体所包含的 XML 文档
status：HTTP状态码
statusText：HTTP 状态描述

XHR 对象有一个 readyState 属性，表示当前处在请求/响应过程的哪个阶段：

0：未初始化，尚未调用 open() 方法
1：已打开，已调用 open() 方法，尚未调用 send() 方法
2：已发送，已发送，已调用 send() 方法，尚未收到响应
3：接收中，已经收到部分响应
4：完成，已经收到所有响应，可以使用

每次 readyState 从一个值变成另一个值，都会触发 readystatechange 事件。可以借此机会检查 readyState 的值：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  } 
};
xhr.open("get", "example.txt", true);
xhr.send(null);

在收到响应之前如果想取消异步请求，可以调用 abort() 方法，中断请求后，应该取消对 XHR 对象的引用。

每个 HTTP 请求和响应都会携带一些头部字段，如果需要发送额外的请求头部，可以使用 setRequestHeader() 方法。这个方法接收两个参数：头部字段的名称和值。为保证请求头部被发送，必须在 open() 之后、send() 之前调用该方法：

let xhr = new XMLHttpRequest();
xhr.open("get", "example.php", true);
xhr.setRequestHeader("MyHeader", "MyValue");
xhr.send(null);

使用 getResponseHeader() 方法从 XHR 对象获取响应头部，只要传入要获取头部的名称即可。可以使用 getAllResponseHeaders() 方法获取所有响应头部信息：

let myHeader = xhr.getResponseHeader("MyHeader");
let allHeaders  xhr.getAllResponseHeaders();

跨源资源共享(CORS，Cross-Origin Resource Sharing)定义了浏览器与服务器如何实现跨源通信。CORS 背后的基本思路就是使用自定义的 HTTP 头部允许浏览器和服务器相互了解，以确实请求或响应应该成功还是失败。

第24章 网络请求与远程资源

第24章网络请求与远程资源